<template>
  <a-menu
    mode="inline"
    type="inner"
    style="border: 0;"
    :defaultSelectedKeys="defaultSelectedKeys"
    @select="handleSelected"
  >
    <a-menu-item v-for="role in list" :key="role.id">
      {{role.name}}
    </a-menu-item>
  </a-menu>
</template>

<script>

  import {findRoles} from "@/api/role";

  export default {

    name: 'RoleList',

    data(){
      return {
        defaultSelectedKeys: [],
        list: []
      }
    },

    created() {
      this.queryData()
    },

    methods: {
      queryData(){
        findRoles().then(resp=>{
          this.list = resp.result.list
          const roleId = this.list[0].id
          this.defaultSelectedKeys.push(roleId)
          this.$emit('select',roleId)
        })
      },
      handleSelected(data){
        this.$emit('select',data.key)
      }
    }

  }
</script>

<style lang="less" scoped>
</style>
